<template>
  <div>
    <ledIntroduce v-show="userId == 1"></ledIntroduce>
    <ledSystemArchitecture v-show="userId == 2"></ledSystemArchitecture>
    <ledControl v-show="userId == 3"></ledControl>
    <beepIntroduce v-show="userId == 4"></beepIntroduce>
    <beepSystemArchitecture v-show="userId == 5"></beepSystemArchitecture>
    <beepControl v-show="userId == 6"></beepControl>
    <temperatureIntroduce v-show="userId == 7"></temperatureIntroduce>
    <temperatureSystemArchitecture v-show="userId == 8"></temperatureSystemArchitecture>
    <temperatureControl v-show="userId == 9"></temperatureControl>
  </div>
</template>

<script>
  import ledIntroduce from './introduce/ledIntroduce'
  import ledSystemArchitecture from './systemArchitecture/ledSystemArchitecture'
  import ledControl from './control/ledControl'
  import beepControl from './control/beepControl'
  import beepIntroduce from './introduce/beepIntroduce'
  import beepSystemArchitecture from './systemArchitecture/beepSystemArchitecture'
  import temperatureIntroduce from './introduce/temperatureIntroduce'
  import temperatureSystemArchitecture from './systemArchitecture/temperatureSystemArchitecture'
  import temperatureControl from './control/temperatureControl'
  export default {
    name: 'contents',
    components: {
      ledIntroduce,
      ledSystemArchitecture,
      ledControl,
      beepControl,
      beepIntroduce,
      beepSystemArchitecture,
      temperatureIntroduce,
      temperatureSystemArchitecture,
      temperatureControl
    },
    data() {
      return{
        userId: 1
      }
    },
    mounted() {
      this.$bus.$on('navMenus', (data)=>{
        this.userId = data;
      })
    }
  }
</script>

<style>
</style>
